import { FormEventHandler, HTMLAttributes, RefObject, useEffect } from "react"
import styled from "@emotion/styled"
import {
    useForm,
    FormProvider,
    Control,
    UseFormHandleSubmit,
    FieldValues,
    FormState,
} from "react-hook-form"
import Checkbox from "@/components/form_item/Checkbox"
import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { useAtom } from "jotai/index"
import { LoginAgreeValueAtom } from "@/pages/UserCenterPage/atom"

type queryKeyType = "MandatoryCheckbox" | "ProceedButton" | "ExitButton"

type Props = HTMLAttributes<HTMLDivElement> & {
    ref?: RefObject<unknown>
    queryList: queryKeyType[]
    onSubmit: FormEventHandler<HTMLDivElement> &
    (() => Promise<void>) &
    _.DebouncedFuncLeading<(data: never) => Promise<void>>
    onExit?: () => void
    sendCode?: () => Promise<{ success: boolean }>
    back?: () => void
    goMandatory?: () => void
    goTerms?: () => void
    goPrivacy?: () => void
    showSubmitButton?: boolean
    excludingUIName?: object
}

const FormFieldItem = (props: {
    key: queryKeyType
    control: Control
    reset: Props
    formState: FormState<FieldValues>
    handleSubmit: UseFormHandleSubmit<FieldValues>
}) => {
    const { key, control, reset, handleSubmit, formState } = props
    const [AgreeValue] = useAtom(LoginAgreeValueAtom)
    switch (key) {
        case "MandatoryCheckbox":
            return (
                <Agree key={key}>
                    <Checkbox
                        fieldName={"MandatoryCheckbox"}
                        initValue={AgreeValue.value || false}
                        isShowTip={false}
                    />
                    <ShowMandatory>
                        <SpanA>I agree to the</SpanA>
                        <SpanB onClick={reset?.goTerms}>Terms of use</SpanB>
                        <SpanA>and</SpanA>
                        <SpanB onClick={reset?.goPrivacy}>Privacy policy.</SpanB>
                    </ShowMandatory>
                </Agree>
            )
        case "ProceedButton":
            return (
                <SubmitButton
                    key={key}
                    onClick={handleSubmit(reset?.onSubmit)}
                    // @ts-ignore
                    variant={
                        formState.isValid
                            ? SubmitButtonVerifyOkBackgroundColor
                            : SubmitButtonBackgroundColor
                    }
                >
                    Proceed
                </SubmitButton>
            )
        case "ExitButton":
            return (
                <ExitButton
                    key={key}
                    onClick={reset?.onExit}
                    // @ts-ignore
                    variant={{}}
                >
                    Exit
                </ExitButton>
            )
        default:
            return null
    }
}

function ReactFormProvider(props: Props) {
    const { showSubmitButton = true, onSubmit, excludingUIName, queryList, ref, children } = props
    const methods = useForm()
    const { control, reset, handleSubmit, formState } = methods
    useEffect(() => {
        if (excludingUIName && Object.keys(excludingUIName as object).length > 0) {
            reset(excludingUIName)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [reset])
    return (
        <FormProvider {...methods}>
            {queryList.map((list, idnex) => {
                return FormFieldItem({
                    key: list,
                    control: control,
                    reset: props,
                    formState,
                    handleSubmit,
                })
            })}
        </FormProvider>
    )
}

export default ReactFormProvider

const SubmitButtonBackgroundColor = {
    type: "solid",
    backgroundColorLeft: "#FF99B3 1.52%",
    backgroundColorRight: "#FFC2EB 100%",
}

const SubmitButtonVerifyOkBackgroundColor = {
    type: "solid",
    backgroundColorLeft: "#FF3568 1.52%",
    backgroundColorRight: "#FF5CC9 100%",
}

const SubmitButton = styled(ButtonRegular)`
    height: 40rem;
    width: 100%;
    font-family: "Gilroy", sans-serif;
    font-weight: 500;
    font-size: 16rem;
    line-height: 24rem;
    letter-spacing: 0;
    text-align: center;
    outline: none;
    border: none;
    box-shadow: none;
    margin-top: 24rem;
`

const ExitButton = styled(ButtonRegular)`
    height: 40rem;
    width: 100%;
    font-family: "Gilroy", sans-serif;
    font-weight: 500;
    font-size: 16rem;
    line-height: 24rem;
    letter-spacing: 0;
    text-align: center;
    outline: none;
    box-shadow: none;
    margin-top: 16rem;
    background-color: #fff !important;
    color: #ff3568;
    border: 1px solid #ff3568;
    //border-image-source: linear-gradient(91.79deg, #ff3568 1.52%, #ff5cc9 100%);
`

const Agree = styled.div`
    display: flex;
    justify-content: flex-start;
    align-items: center;
`

const SpanA = styled.span`
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 12rem;
    line-height: 16rem;
    letter-spacing: 0;
    color: #6a7081;
`

const SpanB = styled.span`
    font-family: "Gilroy", sans-serif;
    font-weight: 500;
    font-size: 12rem;
    line-height: 16rem;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0;
    text-decoration-thickness: 0%;
    color: #ff356b;
    margin: 0 3rem;
`
const ShowMandatory = styled.div``
